import { Layout } from 'antd';
import React, { useState } from 'react';
import FootBar from './layout/FootBar';
import HeaderBar from './layout/HeaderBar';
import SideBar from './layout/SideBar';
import './App.css'
import 'antd/dist/antd.min.css'
import { Outlet } from 'react-router-dom';

const { Header, Footer, Content } = Layout;

export default function App() {
  const [collapsed, setCollapsed] = useState(false);

  return (
    <div className='all-container'>
      <Layout className='my-context'>
        <SideBar collapsed={collapsed} setCollapsed={setCollapsed} />

        <Layout
          style={{
            marginLeft: collapsed ? 80 : 250,
            transition: 'margin-left 0.2s ease'
          }}
        >
          <Header style={{ background: '#fff', padding: 0, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)', zIndex: 10 }}>
            <HeaderBar />
          </Header>

          <Content style={{
            padding: 24,
            minHeight: 'calc(100vh - 128px)',
            background: '#f5f7fa'
          }}>
            <Outlet />
          </Content>

          <Footer style={{
            textAlign: 'center',
            padding: '16px 50px',
            background: '#f0f2f5'
          }}>
            <FootBar />
          </Footer>
        </Layout>
      </Layout>
    </div>
  )
}